<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{name}}</h2>
      <a @click="handle" href="http://chst.vip">点鸡</a>
      <div class="dv" @click="handle3">
        <p>一个朴实无华的p标签</p>
        <a
          @click.prevent.stop="handle2"
          href="http:chst.vip:8081/data/index.json"
          >点鸡2</a
        >
      </div>
      <input @keydown.enter="down" type="text" />
    </div>
  </body>
</html>
<script src="./vue.js"></script>
<script>
  // 指令修饰符
  // .stop     阻止冒泡 （掌握）
  // .prevent  阻止默认行为 （掌握）
  // .capture  开启捕获
  // .self     事件作用在当前e.target
  // .once     事件只触发一次
  // .native   用于触发dom的原生事件 （掌握）

  //   按键修饰符
  // .enter .esc .space .... 想按那个键 直接.哪个就可以
  const vm = new Vue({
    el: "#app",
    data: {
      name: "李相赫",
    },
    methods: {
      down(e) {
        console.log(e.target.value);
      },
      handle3() {
        console.log("555");
      },
      handle2() {
        console.log("ppp");
      },
      handle(e) {
        e.preventDefault();

        console.log(123123);
      },
    },
  });
</script>
